<template>
	<view class="cell-list">
		<view class="cell-item" v-for="(item,index) in list" :key="index" @click="enterDetail(item)">
			<view class="title-line">
				<view class="title-line-left">
					<slot name='icon'></slot>
					<view class="cell-name">{{item.name}}</view>
				</view>
				<view class="title-icon" v-if="item.serviceStateName">
					{{item.serviceStateName}}
				</view>
			</view>
			<view class="patrol-line"></view>
			<view class="cell-line">
				<view class="cell-line-item" v-for="(val,index) in item.secondArr" :key="index">
					<view class="cell-label">
						{{val.label}} :
					</view>
					<view class="cell-value">
						{{val.value || '--'}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				// default: []
			},
			isIcon: {
				type: Boolean,
				// default: true
			},
		},
		data() {
			return {}
		},
		methods: {
			// 详情
			enterDetail(item) {
				this.$emit('acquireId',item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cell-list {
		padding-bottom: px2vh(40);
	}

	.cell-item {
		width: px2vw(1020);
		margin: 0 auto;
		background: #ffffff;
		border-radius: px2vh(20);
		margin-top: px2vh(30);
		padding: 0 px2vw(30);
		padding-bottom: px2vw(30);
		box-sizing: border-box;
		
		.patrol-line {
			width: 100%;
			border: px2vh(1) solid #e5e5e5;
		}

		& .cell-name {
			color: #333333;
			font-size: px2vw(46);
			margin-bottom: px2vh(30);
			margin-left: px2vw(20);
			padding-top: px2vw(30);
			box-sizing: border-box;
			flex: 1;
		}

		& .title-line {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title-line-left {
				display: flex;
				align-items: center;
				image {
					width: px2vw(64);
					height: px2vw(64);
					margin-top: px2vh(6);
				}
			}
		}
	}

	.cell-line {
		padding: 0 px2vw(20);
		display: flex;
		flex-wrap: wrap;
		// margin-top: px2vh(42);
		margin-top: 10px;
	}

	.line-item {
		display: flex;

		.line-content {
			color: #333333;
			font-weight: bold;
		}
	}

	.cell-line-item {
		display: flex;
		width: 54%;
		align-items: flex-start;
		font-size: px2vw(40);
		line-height: px2vh(62);
		color: #666666;
		word-break: break-all;
	}

	.cell-line-item:nth-child(even) {
		width: 46%;
	}

	.cell-value {
		color: #333;
		margin-left: px2vw(25);
		text-align: left;
		line-height: px2vh(62);
	}
	.cell-label{
		white-space: nowrap;
	}
	.title-icon {
		width: px2vw(323);
		// min-width: px2vw(223);
		height: px2vh(60);
		background: rgba(65, 220, 131, 0.1);
		border-radius: px2vh(10);
		color: #41dc83;
		font-weight: bold;
		text-align: center;
		line-height: px2vh(62);
		font-size: px2vh(32);
		align-self: flex-start;
		margin-top: px2vh(50);
	}
</style>